<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
</head>
<body>
<div id="div">
    <!-- {{}} vue的插值表达式 -->
    {{val}}
    <br>
    <!--if不可用 三元运算符可用-->
    <span>{{1==1?"a":"b"}}</span>
    {{username}}
</div>
<br>
<div id="student">
    <div>姓名: {{name}}</div>
    <div>班级: {{classRoom}}</div>
    <button onclick="show()">显示信息</button>
    <button onclick="changeClass()">更改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#div",   //el: 指定接管页面区域
        data: {   //data: 生产数据的位置
            val: "Hello Vue!",
            username: "张三"
        }
    });

    let vue = new Vue({
        //指定接管页面区域
        el: "#student",
        //生产数据的位置
        data: {
            name: "<button onclick=\"show()\">显示信息</button>",
            classRoom: "黑马29期"
        },
        methods: {
            study() {
                alert(this.classRoom + "的" + this.name + "正在学习");
            },
            change(){
                this.classRoom="传智播客";
            }
        }
    });

    function show() {
        vue.study();
    }

    function changeClass() {
        vue.change();
    }
</script>
</html>